<template>
  <div>
    <div class="tabs">
      <span @click="componentName = 'A'" :class="{ select: componentName === 'A' ? true : false }">A</span>
      <span @click="componentName = 'B'" :class="{ select: componentName === 'B' ? true : false }">B</span>
      <span @click="componentName = 'C'" :class="{ select: componentName === 'C' ? true : false }">C</span>
    </div>
    <div class="content">
      <!-- 
        动态组价（可以在多个组件间来回切换）
        切换(在挂载和卸载间切换)
        :exclude="['GuPiao']"// 排除GuPiao不被缓存
        :max="2" 最多缓存2个组件实例。LRU缓存机制
      -->
      <KeepAlive :max="2">
        <component :is="ComA" v-if="componentName === 'A'" />
        <component :is="ComB" v-if="componentName === 'B'" />
        <component :is="ComC" v-if="componentName === 'C'" />
      </KeepAlive>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ComA from './ComA.vue';
import ComB from './ComB.vue';
import ComC from './ComC.vue';
const componentName = ref('A')
</script>

<style lang="scss" scoped>
.tabs {
  span {
    margin: 10px;
    cursor: pointer;
  }
}

.content {
  padding: 0 20px;
}

.select {
  background-color: aqua;
}
</style>